<template>
  <div>
    <!-- banner -->
    <div class="banner" :style="cover" />

    <el-row class="home-container" >
      <el-col :span="24">
        <v-card shadow="hover" style="margin-left: 10px;border: 1px solid #8c939d;">
          <div style="display: flex;justify-items: center">
            <div style="padding: 20px;">
              <el-avatar :size="100" style="cursor: pointer;" >
                <img :src="columnInfo.columnCover"/>
              </el-avatar>
            </div>
            <div style="padding: 20px 10px;">
              <div>
                <span style="color: #735c0f;font-size: 25px;" >{{ columnInfo.columnName }}</span>
                <span class="span1" v-if="columnInfo.visible === 1">
                  <font style="color: #735c0f;">仅自己可见</font>
                </span>
                <span class="span1" v-if="columnInfo.visible === 2">
                  <font style="color: #735c0f;">所有人可见</font>
                </span>
                <span class="span1" v-if="columnInfo.approveStatus === 1">
                  <font style="color: #7bc549">待审批</font>
                </span>
                <span class="span1" v-if="columnInfo.approveStatus === 2">
                  <font style="color: #7bc549;">审批通过</font>
                </span>
                <span class="span1" v-if="columnInfo.approveStatus === 3">
                  <font style="color: #7bc549;">审批拒绝</font>
                </span>
              </div>
              <div style="margin-top: 20px;">
                <span style="color: #1abc9c">
                  {{ columnInfo.columnIntro }}
                </span>
              </div>
              <div style="margin-top: 20px;">
                <span style="color: #6a737d;font-size: 15px;" >
                  <router-link :to="'/user/' + columnInfo.columnCreateUserId" tag="a" target="_blank">
                    <span style="color: #f24f2d">{{columnInfo.columnCreateUserName}}</span> 创建于
                  </router-link>
                  <span style="color: #7bc549;margin-left: 6px;">
                    <i class="iconfont iconrili" />
                    {{ handleCreateTime(columnInfo.createTime) }}
                  </span>
                </span>
              </div>
            </div>
            <div style="margin-left: auto;padding: 20px;">
              <el-button v-if="showManage" icon="el-icon-setting"
                         @click="manage" style="margin-left: auto" size="small" type="info">管理</el-button>
              <el-button v-if="showFollow" icon="el-icon-plus"
                         @click="followColumn" style="margin-left: auto" size="small" type="success">关注</el-button>
              <el-button v-if="showCancelFollow" icon="el-icon-minus"
                         @click="cancelFollowColumn" style="margin-left: auto" size="small" type="danger">取消关注</el-button>
            </div>
          </div>


        </v-card>

        <v-card v-if="columnArticleList.length === 0"
                shadow="hover"
                style="margin-left: 10px;margin-top: 10px;border: 1px solid #8c939d;">
          <el-empty description="暂无数据"></el-empty>
        </v-card>

        <v-card v-if="columnArticleList.length > 0"
            shadow="hover"
                style="margin-left: 10px;margin-top: 10px;border: 1px solid #8c939d;">
          <div style="padding: 20px;">
            <v-row>
              <v-col md="3" cols="12" v-for="(item, index) of columnArticleList" :key="item.articleId">
                <!-- 文章 -->
                <v-card class="animated zoomIn article-item-card">
                  <div class="article-item-cover">
                    <router-link :to="'/articles/' + item.articleId" tag="a" target="_blank">
                      <!-- 缩略图 -->
                      <v-img class="on-hover" width="100%" height="100%" :src="item.articleCover" />
                    </router-link>
                  </div>
                  <div class="article-item-info" style="padding: 10px;">
                    <div>
                      <router-link :to="'/articles/' + item.articleId" tag="a" target="_blank">
                        <span style="color: #005cc5;white-space: nowrap;">
                          {{ handleArticleTitle(item.title) }}
                        </span>
                      </router-link>
                    </div>
                    <div style="margin-top:0.375rem">
                      <!-- 创建时间 -->
                      <v-icon size="20">mdi-clock-outline</v-icon>
                      {{ handleCreateTime(item.createTime) }}
                    </div>
                  </div>
                </v-card>
              </v-col>
            </v-row>

            <!--    分页        -->
            <v-pagination color="#00C4B6"
                          v-model="current"
                          :length="Math.ceil(queryColumnArticleParam.total / queryColumnArticleParam.pageSize)"
                          total-visible="7"
                          style="margin-top: 20px;"/>
          </div>
        </v-card>

      </el-col>

    </el-row>


    <!-- 查看登录记录的弹框   -->
    <el-dialog title="专栏管理" :visible.sync="columnVisible" width="40%" >
      <div style="display: flex;justify-content: center;align-items: center;">
        <el-transfer
            :titles="['未选择', '已选择']"
            filter-placeholder="请输入文章标题"
            :props="{key: 'articleId', label: 'title'}"
            v-model="selectedArticleIds"
            :data="userAllArticleList">
        </el-transfer>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="columnVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitManage" :loading="loading">确 定</el-button>
      </span>
    </el-dialog>


  </div>
</template>

<script>
import columnApi from '../../api/articleColumn';
import { getUserId } from '../../utils/cookieUtil';
import { getUserArticleList } from '../../api/article';

export default {
  data() {
    return  {
      columnCreateUserId: '',
      userId: '',
      selectedArticleIds: [""],
      userAllArticleList: [],
      columnVisible: false,
      current: 1,
      columnId: this.$route.params.columnId,
      columnInfo: {},
      queryColumnArticleParam: {
        pageNo: 1,
        pageSize: 8,
        total: 0,
        columnId: this.$route.params.columnId
      },
      columnArticleList: [],
      title: '',
      loading: false,
      showManage: false,
      showFollow: false,
      showCancelFollow: false,
    }
  },

  methods: {
    // 获取专栏信息
    getColumnInfo() {
      columnApi.columnInfo(this.columnId).then(res => {
        const { code, data, message } = res;
        if (code === 200) {
          this.columnInfo = data;
          this.columnCreateUserId = data.columnCreateUserId;
        } else {
          this.$message.error(message);
        }
        this.initShowFlag(data.approveStatus);
      })
    },

    // 获取专栏的文章
    fetchColumnArticleList() {
      this.queryColumnArticleParam.pageNo = this.current;
      columnApi.getColumnArticle(this.queryColumnArticleParam).then(res => {
        const { code, data, message } = res;
        if (code === 200) {
          this.columnArticleList = data.list;
          this.queryColumnArticleParam.total = data.total;
          this.getSelectArticleIds(data.list);
        } else {
          this.$message.error(message);
        }
      })
    },

    // 获取已选中的文章ID
    getSelectArticleIds(list) {
      let len = [];
      this.selectedArticleIds = [];
      len = JSON.parse(JSON.stringify(list))
      if (len.length !== 0) {
        for (let i = 0; i < len.length; i++) {
          this.selectedArticleIds.push(len[i].articleId);
        }
      } else {
        this.selectedArticleIds = len;
      }
    },

    // 根据文章标题查询用户的文章列表
    queryUserArticleListByArticleTitle() {
      getUserArticleList(this.title).then(res => {
        const { code, data, message } = res;
        if (code === 200) {
          this.userAllArticleList = data;
        } else {
          this.$message.error(message);
        }
      })
    },

    // 点击管理按钮
    manage() {
      this.queryUserArticleListByArticleTitle();
      this.fetchColumnArticleList();
      this.columnVisible = true;
    },

    // 提交专栏管理
    submitManage() {
      if (this.selectedArticleIds.length === 0) {
        this.$message.error('请至少保留一篇文章');
        return;
      }

      let param = {
        columnId: this.$route.params.columnId,
        articleIds: this.selectedArticleIds
      }
      this.columnVisible = true;
      columnApi.manageColumnArticle(param).then(res => {
        const { code, message } = res;
        if (code === 200) {
          this.$message.success('修改成功');
          this.columnVisible = false;
          this.fetchColumnArticleList();
        } else {
          this.$message.error(message);
        }
      })
    },

    handleCreateTime(val) {
      if (!val) {
        return '';
      }
      return val.substr(0, 10);
    },

    handleArticleTitle(val) {
      if (val.length > 12) {
        return val.substr(0, 12) + "...";
      }
      return val;
    },

    // 取消关注
    cancelFollowColumn() {
      let param = {
        userId: this.userId,
        columnId: this.$route.params.columnId,
        type: 2
      }
      this.$confirm('确认取消关注该专栏吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        columnApi.followColumn(param).then(res => {
          const { code, message } = res;
          if (code === 200) {
            this.$message.success('取消成功');
            this.showFollow = true;
            this.showCancelFollow = false;
          } else {
            this.$message.error(message);
          }
        })
      }).catch(() => {
        // 取消删除
      });
    },

    // 关注专栏
    followColumn() {
      let param = {
        userId: this.userId,
        columnId: this.$route.params.columnId,
        type: 1
      }

      columnApi.followColumn(param).then(res => {
        const { code, message } = res;
        if (code === 200) {
          this.$message.success('关注成功');
          this.showFollow = false;
          this.showCancelFollow = true;
        } else {
          this.$message.error(message);
        }
      })
    },

    initShowFlag(approveStatus) {
      if (!this.userId) {
        this.showFollow = true;
        this.showManage = false;
        this.showCancelFollow = false;
        if (approveStatus !== 2) {
          this.$router.push("/404");
        }
      } else {
        if (this.userId === this.columnCreateUserId) {
          this.showManage = true;
          this.showFollow = false;
          this.showCancelFollow = false;
        } else {
          if (approveStatus !== 2) {
            this.$router.push("/404");
          }
          this.showManage = false;
          columnApi.checkFollow(this.userId, this.$route.params.columnId).then(res => {
            const { code, data, message } = res;
            if (code === 200) {
              this.showFollow = !data;
              this.showCancelFollow = data;
            } else {
              this.$message.error(message);
            }
          })
        }
      }
    }

  },

  computed: {
    cover() {
      return "background: url("
          + 'https://blog4j.oss-cn-shanghai.aliyuncs.com/article_img/20240929/8fa0931764.jpg' + ") center center / cover no-repeat";
    }
  },

  created() {
    this.userId = getUserId();
    this.getColumnInfo();
    this.fetchColumnArticleList();
  },

  watch: {
    current(val) {
      this.current = val;
      this.fetchColumnArticleList();
    }
  }
}


</script>

<style>
.home-container {
  max-width: 1000px;
  margin: 350px auto 28px auto;
  padding: 0 5px;
}

.span1 {
  font-size:12px;
  border-radius:3px;
  border: 1px solid  #f70;
  text-align: center;
  margin-left: 8px;
}

.article-item-card {
  border-radius: 8px !important;
  box-shadow: 0 4px 8px 6px rgba(7, 17, 27, 0.06);
}
.article-item-card a {
  transition: all 0.3s;
}
.article-item-cover {
  height: 220px;
  overflow: hidden;
}
.article-item-card a:hover {
  color: #8e8cd8;
}
.tag-wrapper a {
  color: #fff !important;
}
</style>